<template>
  <div id="detail">
     <nav-bar>
        <div slot="left" class="back" @click="back">
            <img src="~assets/img/common/back.svg" alt="">
        </div>
        <div slot="center" class="title">
            <div  :class="{'activeTitle':index==titleCurrentIndex}" 
                  class="title-item" v-for="(title,index) in titles" 
                  :key="index"
                   @click="titleClick(index)">{{title}}</div>
        </div>
     </nav-bar>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
  components: {
    NavBar
  },
  data() {
      return {
          titleCurrentIndex: 0,  //头部标题选中状态
          titles:[
              '商品',
              '参数',
              '评论',
              '推荐'
          ],
          
      }
  },
  created() {
    
  },
  methods: {
      titleClick(index){  //点击切换title  并改变状态
          this.titleCurrentIndex = index
          this.$emit('titleClick',index)
      },
      back(){  //点击左上角返回
        this.$router.back()
      }
  },
}
</script>

<style scope>
 .back{
     margin-top: 5px;
 }
 .title{
     display: flex;
     font-size: 13px;
 }
 .title-item{
    flex: 1;
 }
 .activeTitle{
     color: var(--color-high-text);
 }
</style>